/*
 * @Author: Dufen~123 dufen.0
 * @Date: 2024-11-26 15:28:40
 * @LastEditors: Dufen~123 dufen.0
 * @LastEditTime: 2024-11-28 10:23:24
 * @FilePath: \my-app\src\pages\main.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
// import React, { useState } from "react";
import { Outlet } from "react-router-dom"; //Outlet是子路由的位置
import CommonAside from "../components/commonAside";// 侧边栏组件
import CommonHeader from "../components/commonHeader";// 顶部导航栏组件
import CommonTag from "../components/commonTag";// 标签页组件
import { Layout, theme } from "antd";// Ant Design的布局组件和主题
import { useSelector } from "react-redux";// 用于从Redux中获取状态
import { RouterAuth } from "../router/routerAuth";// 路由守卫组件
const { Content, Footer } = Layout;

const Main = () => {
  //hooks语法定义函数式组件
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken(); // 获取Ant Design的主题颜色和圆角大小//这段token不知道是什么东西
  const collapse = useSelector((state) => state.tab.isCollapse);
  //useSelector这个勾子用来获取state的初始状态,用变量Collapse来接收
  return (
    <RouterAuth>
      {" "}
      <Layout
        style={{
          minHeight: "100vh",
        }}
      >
        {/* 左侧 sider */}
        <CommonAside collapse={collapse} />
        <Layout>
          {/* 顶部header */}
          <CommonHeader collapse={collapse} />
          <CommonTag />
          {/* 中间内容 */}
          <Content
            style={{
              margin: "24px 16px",
              padding: 24,
              minHeight: 280,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            <Outlet></Outlet>
          </Content>
          {/* 底部 */}
          <Footer
            style={{
              textAlign: "center",
            }}
          >
            Ant Design ©{new Date().getFullYear()} Created by Ant UED
          </Footer>
        </Layout>
      </Layout>
    </RouterAuth>
  );
};

export default Main;
